<template>
	<view class="container">
		<view class="loading" v-if="loading">
			<u-loading></u-loading>
		</view>
		<view class="wrap" v-else>
			<u-sticky>
				<view class="u-tabs-box">
					<u-tabs activeColor="#FF4E47" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
					 swiperWidth="750"></u-tabs>
				</view>
			</u-sticky>
			<view class="swiper-box">
				<view class="page-box">
					<view v-if="empty">
						<view class="centre">
							<image :src="appletImgUrl+'no-order.png'" mode=""></image>
							<view class="explain">
								空空如也！
							</view>
							<navigator url="/pages/tabBar/index/index" open-type="switchTab" class="btn">随便逛逛</navigator>
						</view>
					</view>
					<view class="" v-else style="padding-top: 20rpx;">
						<view class="order" v-for="(res, indexs) in dataList" :key="indexs">
							<view class="top">
								<!-- <view class="left">
									<u-icon :name="appletImgUrl+'order-store-icon.png'" :size="30"></u-icon>
									<view class="store">{{ res.storeName }}</view>
									
								</view> -->
								<block v-if="res.groupBuyingListId && res.status == 20">
									<view class="right" v-if="res.groupBuyingList.status == 10">待分享，还差{{ res.groupBuyingList.neededUserCount }}人拼成</view>
									<view class="right" v-if="res.groupBuyingList.status == 20 || res.groupBuyingList.status == 15">抢购成功，待发货</view>
								</block>
								<block v-else>
									<view class="right">{{ status(res) }}</view>
								</block>
							</view>
							<view class="order-info">
								<view class="order-number">订单号：{{res.orderNumber}}</view>
								<view class="order-time">时间：{{res.createTime}}</view>
							</view>
							<view class="item" @click="orderDetail(res,indexs)" v-for="(items, index) in res.items" :key="items.id">
								<view class="left">
									<!-- <image :src="items.goodsPhoto" mode="aspectFill"></image> -->
									<view style="width: 200rpx;">
										<u-lazy-load height="200" img-mode="aspectFill" border-radius="10" :image="items.goodsPhoto"></u-lazy-load>
									</view>
								</view>
								<view class="content">
									<view class="title u-line-2">{{ items.goodsName }}</view>
									<view class="type">{{ items.goodsSkuName }}</view>
									<!-- <view class="delivery-time">下单时间：{{ item.createTime }}</view> -->
								</view>
								<view class="right">
									<view class="price">
										￥{{items.totalPrice}}
										<!-- ￥{{ priceInt(item.totalPrice) }}
												<text class="decimal">.{{ priceDecimal(item.totalPrice) }}</text> -->
									</view>
									<view class="number">x{{ items.goodsCount }}</view>
								</view>
							</view>
							<view class="total">
								共{{ totalNum(res.items) }}件商品 合计:
								<text class="total-price" v-if="res.payType=='RED_INTEGRAL'">
									积分{{res.total_integral}}
									
								</text>
								<text class="total-price" v-if="res.payType!='RED_INTEGRAL'">
									￥{{ priceInt(totalPrice(res.items)) }}.
									<text class="decimal">{{ priceDecimal(totalPrice(res.items)) }}</text>
								</text>
							</view>
							<view class="bottom">
								<block v-if="res.status == 10">
									<view class="btn" @click="show = true;orderScene='cancel';orderItem = res;content='确认取消该笔订单吗？'">取消订单</view>
									<view class="btn" @click="pay(res)">去付款</view>
								</block>

								<block v-if="res.status == 30">
									<!-- <navigator :url="`/pages/webView/webView?url=https://m.kuaidi100.com/index_all.html&type=${res.shipCompany}&postid=${res.shipCode}`"
											 class=" btn" v-if="res.shipCode">查看物流</navigator> -->
									<view @click="warning" class="btn" v-if="res.shipCode">查看物流</view>
									<view class="btn" @click="show = true;orderScene='receivingGoods';orderItem = res;content='确认已收到宝贝吗？'">确认收货</view>
									<navigator v-if="res.enableShareOrder" :url="`/pages/user/shareOrder/shareOrder?orderNumber=${res.basicOrderNumber}`"
									 class="btn">分享好友</navigator>
								</block>
                               
									<block v-if="res.status == 20 && res.groupBuyingListId && (res.groupBuyingList.status == 15 || res.groupBuyingList.status == 20)">
										<navigator :url="`/pages/user/afterSale/afterSale?orderNumber=${res.orderNumber}&type=refund&payType=${res.payType}&total_integral=${res.total_integral}`" v-if="res.payType&&res.payType=='RED_INTEGRAL'" class="btn">申请退款</navigator>
										<navigator :url="`/pages/user/afterSale/afterSale?orderNumber=${res.orderNumber}&type=refund&payType=${res.payType}`"  v-else class="btn">申请退款</navigator>
										<navigator v-if="res.enableShareOrder" :url="`/pages/user/shareOrder/shareOrder?orderNumber=${res.basicOrderNumber}`"
										 class="btn">分享好友</navigator>
									</block>
									
									<block v-if="res.status == 20 && !res.groupBuyingListId">
										<navigator :url="`/pages/user/afterSale/afterSale?orderNumber=${res.orderNumber}&type=refund&payType=${res.payType}&total_integral=${res.total_integral}`" v-if="res.payType&&res.payType=='RED_INTEGRAL'" class="btn">申请退款</navigator>
										<navigator :url="`/pages/user/afterSale/afterSale?orderNumber=${res.orderNumber}&type=refund&payType=${res.payType}`" v-else class="btn">申请退款</navigator>
										<navigator v-if="res.enableShareOrder" :url="`/pages/user/shareOrder/shareOrder?orderNumber=${res.basicOrderNumber}`"
										 class="btn">分享好友</navigator>
									</block>
								
								

								<block v-if="res.status == 20 && res.groupBuyingListId && res.groupBuyingList.status == 10">
									<view @click="setGroupCache(res.groupBuyingListId)" class="btn">邀请好友</view>
								</block>

								<block v-if="res.status == 40">
									<navigator :url="`/pages/user/afterSale/afterSale?orderNumber=${res.orderNumber}&type=returnGoods&payType=${res.payType}`" class=" btn">申请售后</navigator>
									<navigator class=" btn" :url="'/pages/user/evaluate/evaluate?orderNumber='+res.orderNumber">去评价</navigator>
								</block>
								<block v-if="res.status == 70 || res.status == 65">
									<navigator :url="`/pages/user/afterSale/afterSale?orderNumber=${res.orderNumber}`" class=" btn">售后详情</navigator>
								</block>
							</view>
						</view>
						<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</view>
			</view>
		</view>
		<u-modal show-cancel-button confirm-color="#FF4D46" v-model="show" @confirm="confirm" :content="content"></u-modal>
		<!-- 	<view class="" style="height: 50px;overflow: hidden;">
			<u-tabbar :before-switch="tabChange" :show="tabBarState" inactive-color="#A5A4A4" active-color="#333333" icon-size="36"
			 :list="tabBarList" mid-button mid-button-size="104" :border-top="false">
			</u-tabbar>
		</view> -->
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				content: '',
				show: false,
				loading: true,
				orderScene: '',
				dataList: [],
				empty: false,
				list: [{
						name: '全部',
						status: [0, 10, 20, 30, 40, 50, 60, 65, 70, 80]
					},
					{
						name: '待付款',
						status: [10]
					},
					{
						name: '待发货',
						status: [20]
					},
					{
						name: '待收货',
						status: [30]
					},
					{
						name: '已完成',
						status: [60]
					}
				],
				current: 0,
				orderItem: '',
				loadStatus: 'loadmore'
			};
		},
		onLoad(options) {
			this.current = options.current
			this.pageNo = 1
			this.scene = options.scene
			this.getOrderList(this.current, 'cover', () => {
				this.loading = false
				this.$nextTick(() => {
					console.log(this.dataList);
					this.empty = this.dataList == '' ? true : false
				})
			});
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.loadStatus = 'loadmore'
			this.getOrderList(this.current)
			this.$nextTick(() => {
				uni.stopPullDownRefresh()
			})
		},
		onUnload() {
			if (this.scene == 'pay') {
				uni.navigateBack({
					delta: 2
				})
			}
		},
		onReachBottom() {
			if (this.loadStatus == 'loading' || this.loadStatus == 'nomore') return
			this.pageNo++
			this.loadStatus = 'loading'
			this.getOrderList(this.current, 'superposition')
		},
		methods: {
			updateOrder() {
				this.pageNo = 1
				this.loadStatus = 'loadmore'
				this.getOrderList(this.current)
			},
			warning() {
				uni.showToast({
					title: '小程序暂不支持查看物流信息，请前往App查看该订单',
					icon: 'none'
				})
			},
			setGroupCache(groupBuyingListId) {
				this.$u.route('/pages/user/inviteFriends/inviteFriends', {
					groupBuyingListId: groupBuyingListId
				})
			},
			pay(item) {
				this.$u.route('/pages/purchase/pay/pay', {
					money: item.totalPrice,
					data: JSON.stringify({
						orderNumbers: [item.orderNumber]
					}),
					scene: 'order',
					payType:item.payType
				});
			},
			confirm() {
				console.log(this.orderItem)
				let index = this.dataList.findIndex(item => item.orderNumber == this.orderItem.orderNumber)
				if (this.orderScene == 'cancel') {
					this.$u.get('orderform/userCancel/' + this.orderItem.orderNumber).then(res => {
						uni.showToast({
							title: '订单已取消'
						})
						this.dataList[index].status = 0
					})
				}
				if (this.orderScene == 'receivingGoods') {
					this.$u.get('orderform/userreceipt/' + this.orderItem.orderNumber).then(res => {
						uni.showToast({
							title: '收货成功'
						})
						this.dataList[index].status = 40
					})
				}
			},
			status(res) {
				switch (res.status) {
					case 10:
						return '待付款'
						break
					case 20:
						return '待发货'
						break
					case 30:
						return '待收货'
						break
					case 60:
						return '已完成'
						break
					case 0:
						return '订单已取消'
						break
					case 40:
						return '已收货'
						break
					case 50:
						return '评价已完成'
						break
					case 70:
						// return '异常售后处理完成'
						return '售后已完成'
						break
					case 80:
						return '退款'
						break
					case 65:
						return '申请售后中'
						break
				}
			},
			orderDetail(data,index) {
				if(data.payType&&data.payType=='RED_INTEGRAL'){
					this.$u.route('/pages/user/orderDetail/orderDetail', {
						orderNumber: this.dataList[index].orderNumber,
						payType:data.payType,
						total_integral:data.total_integral
					});
				}else{
					this.$u.route('/pages/user/orderDetail/orderDetail', {
						orderNumber: this.dataList[index].orderNumber
					});
				}
				
			},
			// 页面数据
		  getOrderList(idx, update = 'cover', callback = () => {}) {
				// return
				this.$u.post('orderform/orderList', {
					pageNo: this.pageNo,
					pageSize: 10,
					orderType: 1,
					statusList: this.list[idx].status
				}).then(res => {
					console.log('dayin',res)
					callback()
					if (res.list) {
						res.list.forEach(async item => {
							if(item.payType&&item.payType=="RED_INTEGRAL"){
								// console.log(666)
								item.total_integral=await this.getIntegralPrice(item.items);
							}
							item.items.forEach(items => {
								let transformationArray = items.goodsPhoto.split(',')
								items.goodsPhoto = this.imageURL + transformationArray[0]
								
							})
						})
						// this.dataList = res.list
						if (update == 'cover') {
							this.dataList = res.list
						} else {
							// this.dataList = [...this.dataList, ...res.list];
							this.dataList = this.dataList.concat(res.list)
						}
						console.log(this.dataList);
						this.loadStatus = this.dataList.length < 10 ? 'nomore' : 'loadmore'
					} else {
						this.loadStatus = 'nomore'
						if (update == 'cover') {
							this.dataList = []
						}
					}
				}).catch(error => {
					callback()
				})
			},
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.totalPrice);
				});
				return price.toFixed(2);
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.goodsCount;
				});
				return num;
			},
			getIntegralPrice(data){
				return new Promise((resolve,reject)=>{
					this.$u.get('goods/info/'+data[0].goodsId).then(res => {
						//console.log(res)
						let total=0;
						total=res.redIntegral*data[0].goodsCount;
						resolve(total);
					}).catch(error => {
						resolve(0);
					})
				})
			},
			// tab栏切换
			change(index) {
				this.pageNo = 1
				this.current = index
				this.dataList = []
				this.loadStatus = 'loading'
				this.getOrderList(index, 'cover', () => {
					this.$nextTick(() => {
						this.empty = this.dataList == '' ? true : false
					})
				});
			},
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss">
	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		height: 100%;
		display: flex;
		// padding-bottom: 0;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		flex-direction: column;
		box-sizing: border-box;
	}

	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.page-box {
		padding-bottom: 20rpx;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		&:first-child {
			margin-top: 0;
		}

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				// image {
				// 	width: 200rpx;
				// 	height: 200rpx;
				// 	border-radius: 10rpx;
				// }
			}

			.content {
				flex: 1;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					// color: #e5d001;
					color: rgb(255, 78, 71);
					font-size: 24rpx;
					word-break: break-all;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				margin-top: 40rpx;
				color: $u-type-info-dark;
				margin-right: 30rpx;

				&:last-child {
					margin-right: 0;
					color: #FFFFFF;
					border: none;
					background: linear-gradient(-90deg, #FF3868, #FC6161);
				}
			}

			.evaluate {}
		}
	}

	.centre {
		text-align: center;
		// padding: 200rpx 0;
		padding-top: 200rpx;
		font-size: 32rpx;

		image {
			width: 340rpx;
			height: 340rpx;
			// border-radius: 50%;
			margin-bottom: 20rpx;
		}

		// .tips {
		// 	font-size: 24rpx;
		// 	color: #999999;
		// 	margin-top: 20rpx;
		// }

		.btn {
			margin: 30rpx auto;
			width: 200rpx;
			border: 1px solid #F39E22;
			border-radius: 10rpx;
			line-height: 64rpx;
			background-color: #FFFFFF;
			color: #F39E22;
			font-size: 26rpx;
			// background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex: 1;
		flex-direction: column;
		// height: calc(100vh - 50px);
		// height: 100%;
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
	.order-info{
		font-size: 20rpx;
		color: #bfbfbf;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 6rpx;
		border-bottom: 2rpx solid #f3f4f5;
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
	}
</style>
